<template>
    <div
        class="mx-4 mt-4 py-4 box-border rounded-lg flex justify-between items-center overflow-hidden bg-gray-50"
    >
        <div
            v-for="(btn, index) in btnList"
            :key="index"
            class="flex flex-col flex-1 items-center"
            @click="linkToOrderList(btn.target)"
        >
            <IconFont :name="btn.iconName"></IconFont>
            <p class="mt-2 text-xs text-gray-700">{{ btn.text }}</p>
        </div>
    </div>
</template>

<script lang="ts" setup>
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'

const btnList = [
    {
        iconName: 'order',
        target: 'all',
        text: '全部订单'
    },
    {
        iconName: 'shop',
        target: 'wait_pay',
        text: '待支付'
    },
    {
        iconName: 'jdl',
        target: 'wait_get',
        text: '待收货'
    },
    {
        iconName: 'comment',
        target: 'wait_comment',
        text: '待评价'
    },
    {
        iconName: 'refresh',
        target: 'after_sale',
        text: '售后'
    }
]

const linkToOrderList = (tab: string) => {
    if (!Taro.getStorageSync('token')) {
        Taro.navigateTo({
            url: `/pages/mine/login/index`
        })
        return
    }

    // 重新打开订单页，页面可以刷新
    Taro.reLaunch({
        url: `/pages/order/index?tab=${tab}`
    })
}
</script>
